<template>
  <div style="z-index: 100" :class="{ header: true, 'white-bg': isScrolled }">
    <div id="u11" class="ax_default _图片">
      <img id="u11_img" class="img" src="../../assets/images/首页/u88.png" />
    </div>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="home">首页</el-menu-item>
        <el-sub-menu index="home">
          <template #title>宠物救助</template>
          <el-menu-item index="scientificRescue">科学救助</el-menu-item>
          <el-menu-item index="applyVolunteer">申请义工</el-menu-item>
          <el-menu-item index="donateMoney">捐助钱款</el-menu-item>
          <el-menu-item index="donateSupplies">捐助物资</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>宠物领养</template>
          <el-menu-item index="requestCare">申请领养</el-menu-item>
          <el-menu-item index="publishCare">发布领养</el-menu-item>
        </el-sub-menu>
        <!-- <el-sub-menu index="4">
          <template #title>宠物社区</template>
          <el-menu-item index="4-1">发现萌宠</el-menu-item>
          <el-menu-item index="4-2">分享萌宠</el-menu-item>
          <el-menu-item index="4-3">养护服务</el-menu-item>
        </el-sub-menu> -->
        <!-- <el-menu-item index="5">救助站认证</el-menu-item> -->
        <!-- <el-menu-item index="6">关于我们</el-menu-item> -->
      </el-menu>
    </div>
    <div class="btn">
     <ChatDotSquare style="width: 30px; height: 30px;color: #16B78E;margin-right: 40px;" @click="goToChat"  />
    </div>
    <div class="btn">
      <el-button class="el-btn" @click="handleSelect('login','login')">开始拯救毛茸茸</el-button>
    </div>
   
    <el-dialog
    v-model="state.dialogVisibleChat"
    title="聊天"
    width="1000"
    height="800"
    draggable
    class="is-dialog"
  >
    <Chat :userInfo="userInfo" />
  </el-dialog>
  </div>

</template>

<script setup>
import { ref, onMounted,reactive } from 'vue';
import { useRouter } from 'vue-router';

// 跳转
const router = useRouter();

const activeIndex = ref('1');
const activeIndex2 = ref('1');
const handleSelect = (key, keyPath) => {
  router.push({ name: key });
};

const isScrolled = ref(false);

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

const handleScroll = () => {
  if (window.pageYOffset > 200) {
    isScrolled.value = true;
  } else {
    isScrolled.value = false;
  }
};
const state=reactive({
  dialogVisibleChat:false
})
const goToChat=()=>{
  if(window.localStorage.getItem('token')){
  state.dialogVisibleChat=true
}else{
  alert('请先登录')
}
// state.dialogVisibleChat=true
}
</script>

<style scoped>
.header {
  position: sticky;
  top: 0px;
  display: flex;
  height: 80px;
  padding: 0 180px;
  transition: background-color 0.3s;
  margin-bottom: -88px;
}

/* 背景色为白色 */
.white-bg {
  background-color: white !important;
}

/* el-menu 跟随背景色变化 */
.white-bg .el-menu {
  background-color: white !important;
}
#u11 {
  border-width: 0px;
  width: 172px;
  height: 88px;
  display: flex;
}
.el-menu-demo {
  height: 100%;
  /* width: 120%; */
  min-width: 900px;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}
.menu {
  background-color: rgba(0, 0, 0, 0);
}
:deep(.el-menu--horizontal.el-menu) {
  border-bottom: 0 !important;
  background-color: transparent;
}
:deep(.is-active) {
  background-color: #16b78d !important;
  color: white !important;
}
:deep(.el-menu-item) {
  min-width: 100px !important;
}
:deep(.el-sub-menu) {
  min-width: 100px !important;
}
:deep(.el-sub-menu) {
  :deep(.el-menu-item) {
    /* 在这里添加您想要的样式 */
    width: 100px !important;
  }
}
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  color: white !important;
  border-bottom: 0;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: white !important;
  border-bottom: 0;
}
:deep(
    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover
  ) {
  background-color: #16b78d;
}
.btn {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.el-btn {
  height: 50px;
  width: 200px;
  background-color: #16b78e;
  border-radius: 80px;
  color: white;
  border-color: #16b78e;
}
.el-btn:hover {
  background-color: #16b78e;
  color: white;
}
:deep(.el-dialog){
  background-color: #F0F2F5;
  border-radius: 10px;
 }
</style>
